<template>
	<view class="warp">
		<view class="uni-margin-wrap uni-margin-wrap-back">
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-bottom">
					<picker class="text2 text2-1" @change="typePickerChange" :value="index" :range="typelist" range-key="t_name">
						<text class="text text1">{{ check.isNull(parmas.t_name) == false ? parmas.t_name : '请选择反馈类型' }}</text>
					</picker>

					<image class="image" :src="'/static/arrow/arrow_more_2.png'"></image>
				</view>

				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><input class="uni-input input" type="text" placeholder="请输入运单号" v-model="parmas.order_num" /></view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list">
						<textarea
							class="textarea"
							placeholder="请填写您对草根既配的使用感受,我们将认真听取您的一键,努力提供更优质的服务"
							placeholder-class="placeholder-textarea"
							v-model="parmas.content"
						/>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-file">
						<uni-file-picker
							limit="6"
							title="最多选择6张图片"
							:imageStyles="imageStyles"
							v-model="imageValue"
							fileMediatype="image"
							file-extname="png,jpg,jpeg"
							mode="grid"
							:auto-upload="false"
							@select="select"
							@delete="del"
						></uni-file-picker>
					</view>
				</view>
			</view>
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-btn" @click="submitClick"><text class="text">提交</text></view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typelist: [],
			imageValue: [],
			imageSelect: [],
			parmas: {
				t_id: '',
				t_name: '',
				order_num: '',
				img_url: [],
				content: ''
			},
			imageStyles: {
				width: 100,
				height: 100,
				border: {
					// radius: '50%'
				}
			}
		};
	},
	onLoad(option) {
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
		this.getTypeData();
	},
	methods: {
		// 获取上传状态
		select(e) {
			console.log(e);
			this.imageSelect.push(e.tempFilePaths[0]);
			// this.uploadImagesData(e);
		},
		del(e) {
			var index = 0;
			for (var i = 0; i < this.imageSelect.length; i++) {
				var item = this.imageSelect[i];
				if (item == e.tempFilePath) {
					index = i;
				}
			}
			this.imageSelect.splice(index, 1);
			// this.parmas.img_url.splice(e.index, 1)
		},
		typePickerChange(e) {
			var typeItem = this.typelist[e.detail.value];
			this.parmas.t_name = typeItem.t_name;
			this.parmas.t_id = typeItem.id + '';
		},
		getTypeData() {
			this.http.sendRequest({
				api: this.api.mine.mineComplaintTypeApi,
				data: {},
				success: res => {
					console.log(res)
					if (res.success == 'true' && res.data) {
						this.typelist = res.data;
					}
				},
				fail: res => {}
			});
		},

		submitClick() {
			console.log(this.parmas)
			if (this.check.isNull(this.parmas.t_id)) {
				uni.showToast({
					title: '请选择反馈类型'
				});
				return;
			}
			if (this.check.isNull(this.parmas.content)) {
				uni.showToast({
					title: '请输入投诉内容'
				});
				return;
			}
			this.$refs.loadingCover.show();
			if(this.imageSelect.length > 0){
				for (var i = 0; i < this.imageSelect.length; i++) {
					this.uploadImagesData(this.imageSelect[i]);
				}
			}else{
				this.tousuAddData();
			}
		},
		uploadImagesData(e) {
			var data = {};
			this.upload.sendRequest({
				api: this.api.common.uploadImageApi,
				data: data,
				isFiles: true,
				imageData: e,
				success: res => {
					console.log(res);
					if (res.success == 'true' && res.data) {
						this.parmas.img_url.push(res.data.url);
						if (this.parmas.img_url.length == this.imageSelect.length) {
							this.tousuAddData();
						}
					} else {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		tousuAddData() {
			var data = {
				t_id: this.parmas.t_id,
				order_num: this.parmas.order_num,
				img_url: JSON.stringify(this.parmas.img_url),
				content: this.parmas.content
			};
			this.http.sendRequest({
				api: this.api.mine.mineComplaintAddApi,
				data: data,
				success: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					if (res.success == 'true' && res.data) {
						uni.showModal({
							content: res.message,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-margin-wrap-back {
	background-color: $uni-bg-color-grey;
}
.uni-item-view {
	width: 100%;
	margin-top: 16rpx;
	// background-color: #fff;
	padding-top: 16rpx;
	padding-bottom: 16rpx;
	.uni-item-view-base {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx 16rpx 24rpx;
		background-color: $uni-bg-color-grey;
	}

	.uni-item-view-item {
		// width: 100%;
		.uni-item-view-item-list {
			display: flex;
			align-items: center;
			width: 100%;
			.text {
				font-size: 28rpx;
				// margin-left: 24rpx;
			}
			.text1 {
				// margin-left: 23rpx;
				color: $uni-text-color-5;
			}
			.text2 {
				margin-left: 10rpx;
				color: $uni-text-color-grey;
			}
			.input {
				padding-left: 0rpx;
				background-color: $uni-bg-color-grey;
			}
		}
	}
	.uni-item-view-item-file {
		// margin-left: 24rpx;
		// margin-right: 24rpx;
	}
	.uni-item-view-bottom {
		// width: 100%;
		padding-bottom: 16rpx;
		.text {
			font-size: 26rpx;
			color: $uni-text-color-5;
		}
		.text1 {
			// margin-left: 23rpx;
			color: $uni-text-color-5;
		}
		.image {
			width: 36rpx;
			height: 36rpx;
		}
	}
	.textarea {
		width: 100%;
		height: 180rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 0rpx;
		font-size: 28rpx;
		padding-left: 16rpx;
		padding-top: 4rpx;
		border: 1rpx solid $uni-border-color;
		background-color: #fff;
	}
	.placeholder-textarea {
		font-size: $uni-bg-color-grey;
		font-size: 24rpx;
	}
	.uni-item-view-item-btn {
		width: 100%;
		margin-left: 48rpx;
		margin-right: 48rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: $uni-btn-color-primary;
		display: flex;
		align-items: center;
		justify-content: center;
		.text {
			color: #fff;
		}
	}
}
</style>
